<template>
  <div>
    <el-card class="box-card">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" label-position="right">
      <el-row>
        <el-col :span="8">
          <el-form-item label="店铺ID/名称">
            <el-input v-model="formInline.user" placeholder="店铺ID/名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="用户ID/昵称">
            <el-input v-model="formInline.username" placeholder="用户ID/昵称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="交易类型">
            <el-select v-model="formInline.region" placeholder="请选择">
              <el-option label="店铺提现" value="店铺提现"></el-option>
              <el-option label="用户提现" value="用户提现"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="提现单号">
            <el-input v-model="formInline.oddNumbers" placeholder="提现单号" class="margin"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <div class="block">
            <span class="demonstration">日期</span>
            <el-date-picker
              v-model="value1"
              @change="onChange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </div>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button @click="reset">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      </el-form>
    </el-card>
    <div class="one">
      <span>店铺提现金额：<b>{{data2}}元</b></span>
      <span>用户提现金额：<b>{{data1}}元</b></span>
      <span>总提现金额：<b>{{data}}元</b></span>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      border
    >
      <el-table-column
        prop="transaction"
        label="交易类型"
      >
      </el-table-column>
      <el-table-column
        prop="shopId"
        label="店铺ID/用户ID"
      >
      </el-table-column>
      <el-table-column
        prop="username"
        label="店铺名称/昵称"
      >
      </el-table-column>
      <el-table-column
        prop="withdrawalId"
        label="提现单号"
      >
      </el-table-column>
      <el-table-column
        prop="amout"
        label="提现金额"
      >
      </el-table-column>
      <el-table-column
        prop="time"
        label="交易时间"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getItem, setItem } from '@/utils/storage.js'
export default {
  data () {
    return {
      formInline: {
        user: '',
        username: '',
        oddNumbers: '',
        region: ''
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      value1: '',
      value2: '',
      tableData: [], // 页面渲染数组
      data1: null, // 用户提现金额
      data2: null, // 店铺提现金额
      data: null // 总提现金额
    }
  },
  created () {
    this.getUserList()
  },
  methods: {
    async getUserList () {
      if (getItem('PLATEXPENDA')) {
        this.tableData = getItem('PLATEXPENDA')
      }
      const { data } = await this.$http.get('/productA')
      // console.log(data.list)
      this.tableData = data.list
      setItem('PLATEXPENDA', this.tableData)
      this.tableData.forEach(item => {
        if (item.transaction === '店铺提现') {
          this.data2 += item.amout
        } else if (item.transaction === '用户提现') {
          this.data1 += item.amout
        }
      })
      this.data = this.data1 + this.data2
    },
    onChange () {
      console.log(this.value1)
      console.log(this.value2)
    },
    onSubmit () {
      this.tableData = getItem('PLATEXPENDA')
      if (this.formInline.user === '' && this.formInline.username === '' && this.formInline.oddNumbers === '' && this.formInline.region === '' && this.value1 === '') {
        return this.$message.error('至少输入一条内容！')
      }
      const qureyresult = this.tableData.filter(item => {
        return this.formInline.user.trim() === item.shopId || this.formInline.username.trim() === item.username || this.formInline.oddNumbers === item.withdrawalId || this.formInline.region === item.transaction
      })
      console.log(qureyresult)
      this.tableData = qureyresult
    },
    reset () {
      this.formInline.user = ''
      this.formInline.username = ''
      this.formInline.oddNumbers = ''
      this.formInline.region = ''
      this.value1 = ''
      this.tableData = getItem('PLATEXPENDA')
    }
  }
}
</script>

<style lang="less">
.block {
  display: inline-block;
}
.margin {
  margin-left: 21px;
}
.one {
  margin: 20px 0;
  span {
    margin-right: 20px;
  }
}
b {
  color: red;
}
</style>
